<!doctype html>
<html>
<head>
	<!-- 29叶鸿辉 -->
<meta charset="utf-8">
<title>通栏布局</title>
<style type="text/css">
body{margin:0; padding:0;font-size:24px;text-align:center;}
div{
	width:980px;          /*设置所有模块的宽度为980px、居中显示*/
	margin:5px auto;
	background:#D2EBFF;
}
#top{height:40px;}       /*分别设置各个模块的高度*/
#topbar{                 /*通栏显示宽度为100%，此盒子为nav导航栏盒子的父盒子*/
	width:100%;
	height:60px;
	background-color:#3CF;
} 
.nav{height:60px;}
#banner{height:200px;}
#content{height:200px;}
.inner{height:90px;}
#footer{                /*通栏显示宽度为100%，此盒子为inner盒子的父盒子*/
	width:100%;
	height:90px;
	background-color:#3CF;
}
</style>
</head>
<body>
<div id="top">头部</div>
<div id="topbar"> 
	 <div class="nav">导航栏</div>
</div>
<div id="banner">焦点图</div>
<div id="content">内容</div>
<div id="footer">   
	 <div class="inner">页面底部</div>
</div>
</body>
</html>
